<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view style="height: 100%;">
		<view class="shopCenter-info">
			<view class="shopCenter-head">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
					<swiper-item class="swiper-img-item" v-for="(item,index) in storeInfo.imageList" :key="index">
						<image @click="previewImage(storeInfo.imageList,index)" :src="item" class="img-item"
							mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 商家信息 -->
			<view class="shop-info-box flex w100">
				<view class="info-box flex">
					<image :src="storeInfo.icon" v-if="storeInfo.icon" class="shop-ava" mode="aspectFill"></image>
					<image :src="storeInfo.imageList[0]" v-else class="shop-ava" mode="aspectFill"></image>
					<view class="shop-info">
						<view class="name-box flex-row-center ">
							<text class="name">{{storeInfo.company_name}}</text>
							<up-icon name="home-fill" color="#79DED3" size="32rpx"></up-icon>
						</view>
						<!-- 地址 -->
						<view class="address-box ">
							<view class="icon">
								<up-icon name="map" color="#A1A2A3" size="24rpx"></up-icon>
							</view>
							<text class="address">{{storeInfo.address}}</text>
						</view>
					</view>
				</view>
				<!-- 切换用户 -->
				<view class="changeUser flex-center" @tap="changeIdentity">
					<image src="../../static/user/changeUser_icon.png" class="icon" mode=""></image>
					<text class="text">切换用户</text>
				</view>
			</view>

		</view>
		<view class="main flex w100">
			<!-- tab列表 -->
			<up-sticky offset-top="0">
				<view class="tab-box">
					<up-tabs :activeStyle="{
							'fontWeight': 'bold',
							'fontSize': '30rpx',
							'color': '#fff'
						}" lineColor="linear-gradient( 270deg, #94DEAC 0%, #7CDEC7 47%, #79DED3 100%)" :inactiveStyle="{
						 	'fontWeight': 500,
						 	'fontSize': '30rpx',
						 	'color': '#9A9B9C'
						 }" :list="tabList" :current="contentIndex" @change="changeTab"></up-tabs>
				</view>
			</up-sticky>
			<!-- 内容 -->
			<view class="shop-content">
				<swiper class="swiper-content" @change="changeSwiper" :current="contentIndex">
					<!-- 门店 -->
					<swiper-item class="swiper-content-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="getMoreShopList">
							<view v-if="storeList.list.length>0" id='swiperCon3'>
								<storeItemVue :shopInfo="item" v-for="(item,index) in storeList.list" :key="item.id">
								</storeItemVue>
								<view class="view-more" @click="getMoreShopList">
									<up-loadmore :status="storeList.status" />
								</view>
							</view>
							<view class="not-list-view" v-else>
								<text class="text">暂无门店数据~</text>
							</view>
						</scroll-view>
					</swiper-item>
					<!-- 详情 -->
					<swiper-item class="swiper-content-item">
						<scroll-view scroll-y style="height: 100%;width: 100%;">
							<view class="shop-details" id='swiperCon0'>
								<text class="name">简介：</text>
								<text class="details">{{storeInfo.description}}</text>
							</view>
						</scroll-view>
					</swiper-item>
				</swiper>
			</view>
		</view>

	</view>
</template>

<script setup>
	import teamItemVue from '@/components/main/teamItem.vue';
	import matchContentVue from './matchContent.vue';
	import clerkContentVue from './clerkContent.vue';
	import storeItemVue from '../storeItem/storeItem.vue';
	import dayjs from 'dayjs';
	import {
		userInfoStore
	} from '@/stores/user';
	const userStore = userInfoStore();
	const emit = defineEmits(['changeItem']);
	let tabIndexList = [];
	const contentIndex = ref(0);
	const swiperHeight = ref(0);
	const storeInfo = ref({
		imageList: []
	});
	const storeList = reactive({
		list: [],
		page: 1,
		status: 'loadmore'
	})
	onMounted(async () => {
		getMerchantInfo();
		getStoreShopList();
	})
	const tabList = [{
			name: '门店'
		},
		{
			name: '详情'
		},
	];
	const pullDownRefresh = () => { //下拉刷新
		contentIndex.value = 0;
		tabIndexList = [];
		storeList.page = 1;
		storeList.status = 'loadmore';
		storeList.list = [];
		getMerchantInfo();
	}
	const getMerchantInfo = async () => { //获取商家信息
		const res = await $Api.store.getMerchantInfo();
		if (res.code == 1) {
			let imageList = [];
			if (res.data.banner_image) {
				if (typeof res.data.banner_image === 'string') {
					imageList = res.data.banner_image.split(',');
				} else if (Array.isArray(res.data.banner_image)) {
					res.data.banner_image.forEach(item => {
						imageList.push(item.url);
					})
				}
			}
			storeInfo.value = {
				...res.data,
				imageList
			};
			// console.log('storeInfo.value', storeInfo.value);
		} else {
			uni.$u.toast(res.msg);
		}
	}

	const restShopList = () => { //重置门店列表
		storeList.page = 1;
		storeList.status = 'loadmore';
		storeList.list = [];
		getStoreShopList();
	}
	const getMoreShopList = () => {
		if (storeList.status == 'nomore' || storeList.status == 'loading') return;
		storeList.status = 'loading';
		setTimeout(() => {
			getStoreShopList();
		}, 600);
	}
	const getStoreShopList = async () => { //获取商家门店店铺
		const res = await $Api.store.getStoreShopList({
			page: storeList.page
		}, true);
		if (res.code === 1) {
			if (res.data.list) {
				let arr = [];
				arr = res.data.list.map(val => {
					let imageList = [];
					let is24Hr = 0; //是否24小时营业
					if (val.banner_image) {
						if (typeof val.banner_image === 'string') {
							imageList = val.banner_image.split(',');
						} else if (Array.isArray(val.banner_image)) {
							val.banner_image.forEach(item => {
								imageList.push(item.url);
							})
						}
					}
					if (val.business_start_hours && val.business_end_hours) {
						console.log();
						//  dayjs(val.business_start_hours).isSame(dayjs(val.business_end_hours))
						if (val.business_start_hours === val.business_end_hours) {
							is24Hr = 1
						}
					}
					return {
						...val,
						imageList,
						is24Hr
					}
				})
				storeList.list = [...storeList.list, ...arr];
			}
			if (res.data.totalPage && res.data.totalPage > storeList.page) {
				storeList.status = 'loadmore';
				storeList.page++;
			} else {
				storeList.status = 'nomore';
			}
		} else {
			uni.$u.toast(res.msg);
		}
	}
	const changeIdentity = () => { //切换身份
		emit('changeItem', 'user')
	}
	const changeTab = async (e) => {
		contentIndex.value = e.index;
		if (tabIndexList.includes(e.index)) return;
		tabIndexList.push(e.index);
		// if (e.index == 1) { //门店列表
		// 	getStoreShopList();
		// }
	}
	const changeSwiper = (e) => {
		contentIndex.value = e.detail.current;
	}
	const previewImage = (list, index) => { //预览图片
		previewImg(list, index);
	}
	defineExpose({
		pullDownRefresh
	})
</script>

<style lang="scss" scoped>
	@import './css/shopCenter.less';
</style>